<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>MVC DOH Toolbar Widget Test</title>
	<style>
		@import "../../../../dijit/themes/claro/document.css";
		@import "../../../../dijit/tests/css/dijitTests.css";

		.flatScreen {
			background-image: url(../../../../dijit/tests/images/flatScreen.gif); height: 32px; width: 32px;		
	</style>
	<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../../dojo/dojo.js"></script>

	<script type="text/javascript">
		negativeConverter = {
			format: function(value){ return !value; },
			parse: function(value){ return !value; }
		};

		require([
			"dojox/mvc",
			"dojo/parser",
			"dojo/when",
			"dojox/mvc/_patches",
			"dijit/Declaration",
			"dijit/Toolbar",
			"dijit/ToolbarSeparator",
			"dijit/form/Button",
			"dijit/form/DropDownButton",
			"dijit/form/ComboButton",
			"dijit/form/ToggleButton",
			"dijit/ColorPalette",
			"dijit/TooltipDialog",
			"dijit/form/TextBox",
			"dijit/Menu",
			"dijit/MenuItem",
			"dijit/form/TextBox",
			"dijit/form/Select",
			"dijit/form/CheckBox"
		], function(mvc, parser, when){
			(cutItemModel = new dojo.Stateful).set("iconClass", "dijitEditorIcon dijitEditorIconCut");
			(copyItemModel = new dojo.Stateful).set("iconClass", "dijitEditorIcon dijitEditorIconCopy").set("label", "Copy");
			boldItemModel = mvc.newStatefulModel({ data : { "checked" : false}});
				require([
					'doh/runner', 'dijit/dijit'
				], function(){
				require([
					'dojo/domReady!'
					], function(){

						doh.register("parse", function() {
							var dfd = new doh.Deferred();
							when(dojo.parser.parse(), function(){
								dfd.callback(true);
							});
							return dfd;
						});
						// should be able to verify all of the inputs 
						doh.register("check initial values and bindings", [{
							name : "initial",
							runTest : function() {
								doh.is("Copy", dijit.byId("selCopy").get('value'),"value should be Copy");
								doh.is("Copy",  dijit.byId("toolbar1.copy").get('label'),"label should be Copy");
								doh.t(dijit.byId("toolbar1.copy").get('showLabel'),"label should be shown");

								doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
								doh.f(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be false");

								doh.t(dijit.byId("checkItalic").get('checked'),"italic checkbox should be true");
								doh.f(dijit.byId("toolbar1.italic").get('checked'),"italic toolbar should be false");
							}
						}]);

						doh.register("update Copy Label", [{
							name : "Update-First-Name",
							runTest : function() {
								var copyLabel, boldToolbar, bold, italic;
								//test first relevant false
								copyLabel = dijit.byId("selCopy");
								if (copyLabel) {
									copyItemModel.set("label","Copy to clipboard...");
									doh.is("Copy to clipboard...", dijit.byId("selCopy").get('value'),"value should be Copy to clipboard...");
									doh.is("Copy to clipboard...",  dijit.byId("toolbar1.copy").get('label'),"label should be Copy to clipboard...");
								}
								boldToolbar = dijit.byId("boldtoolbar1.copy");
								if (boldToolbar) {
									boldToolbar.set("checked", true);
									doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
									doh.t(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be true");
								}
								bold = dijit.byId("checkBold");
								if (bold) {
									bold.set("checked",false);
									doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
									doh.f(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be false");
								}
								italic = dijit.byId("checkItalic");
								if (italic) {
									italic.set("checked",true);
									doh.t(dijit.byId("checkItalic").get('checked'),"italic checkbox should be false");
									doh.f(dijit.byId("toolbar1.italic").get('checked'),"italic toolbar should be false");
								}
							}
						}]);
						doh.run();

					});
				});	
		}); 
		</script>
</head>


	<body class="claro">
	<script type="dojo/require">at: "dojox/mvc/at"</script>
	<h1 class="testTitle">Toolbar test</h1>

	<span data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"ToolbarSectionStart", defaults:{ label: "Label"}'>
		<span data-dojo-type="dijit.ToolbarSeparator"></span><i>${label}:</i>
	</span>

	<h2>Toolbar from markup</h2>

	<div id="toolbar1" data-dojo-type="dijit.Toolbar"
			><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Buttons"'></div
			><div id="toolbar1.cut" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:false, iconClass: at(cutItemModel, "iconClass")'>Cut</div
			><div id="toolbar1.copy" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true, "*": at(copyItemModel, "*")'>Copy</div

			><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Toggles"'></div
			><div id="toolbar1.bold" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBold", showLabel:false, checked: at(boldItemModel, "checked")'>Bold</div
			><div id="toolbar1.italic" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconItalic", showLabel: true'>Italic</div

></div>

	<div style="margin-top:8px;">
		Icon for "Cut":
		<select data-dojo-type="dijit.form.Select" data-dojo-props="value: at(cutItemModel, 'iconClass')">
			<option value="dijitEditorIcon dijitEditorIconCut">Cut</option>
			<option value="dijitFolderClosed">Folder</option>
			<option value="noteIcon">Note</option>
			<option value="flatScreen">Flat Screen</option>
		</select>
	</div>

	<div style="margin-top:8px;">
		Icon for "Copy":
		<select data-dojo-type="dijit.form.Select" data-dojo-props="value: at(copyItemModel, 'iconClass')">
			<option value="dijitEditorIcon dijitEditorIconCopy">Copy</option>
			<option value="dijitFolderClosed">Folder</option>
			<option value="noteIcon">Note</option>
			<option value="flatScreen">Flat Screen</option>
		</select>
	</div>

	<div style="margin-top:8px;">
		Label for "Copy":
		<select id="selCopy" data-dojo-type="dijit.form.Select" data-dojo-props="value: at(copyItemModel, 'label')">
			<option value="Copy">Copy</option>
			<option value="Copy to clipboard...">Copy to clipboard...</option>
		</select>
	</div>

	<div style="margin-top:8px;">
		Change the state for "Bold" (but this check box is free from change in the tool bar):
		<input id="checkBold" data-dojo-type="dijit.form.CheckBox" checked data-dojo-props="checked: at(boldItemModel, 'checked').direction(at.to)">
	</div>

	<div style="margin-top:8px;">
		"Italic" should be unselected (directly bound to the tool bar item widget):
		<input id="checkItalic" data-dojo-type="dijit.form.CheckBox" checked data-dojo-props="checked: at(dijit.byId('toolbar1.italic'), 'checked').transform(negativeConverter)">
	</div>
  </body>

</html>
